<template>
	<view class="zone">
		<Header title="我的水晶" righttext="记录" path="/pages/my/crystallog" color="#fff"></Header>
		<view class="main">
			<!-- 资产部分 -->
			<view class="protety">
				<view class="left">
					<u-count-to class="countto" :start-val="0" color="#fff" :font-size="50" :end-val="userinfo.crystal" :decimals="5"></u-count-to>
				</view>
			</view>
			<!-- 功能 -->
			<view class="func">
				<view class="button" @click="giveshow = true">去赠送</view>
				<view class="button" @click="show = true">去兑换</view>
			</view>
			<!-- 底部 -->
			<view class="dibu">
				<image class="box" src="http://img.cpgm.cc/panda/static/my/shuij2.png" mode="widthFix" />

				<view class="listbox">
					<p>潮玩水晶应用</p>
					<view class="list">
						<view class="item" v-for="(item , index) in list" :key="index" @click="navtopath(item)">
							<image :src="`http://img.cpgm.cc/panda/static/active/${item.image}`" mode="widthFix" />
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="greybox">
					<image src="http://img.cpgm.cc/panda/static/my/adg.png" mode="widthFix" />
				</view>
			</view>
		</view>


	

		<!-- 说明弹窗 -->
		<!-- <u-popup v-model="show2" mode="center" :mask-close-able="false" length="90%" :border-radius="20">
			<view class="popbox2">
				<image class="close" @click="show2 = false" src="http://img.cpgm.cc/cwxy/static/public/wclose.png" mode="widthFix" />
				<h3>确认兑换元宝</h3>
				<view class="content">
					<p>可兑换{{cannum}}元宝</p>
				</view>
				<view class="btnbox">
					<view class="button btn1" @click="show2 = false">取消</view>
					<view class="button btn2" @click="exchange()">兑换</view>
				</view>
			</view>
		</u-popup> -->

		<u-mask :show ="show">
			<view class="playbox" :class="[show?'playboxac':'']">
				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/self/bigyb.png" mode="widthFix" />
					<h3>兑换银元</h3>
					<p class="explain"> <text>1</text>水晶可以兑换<text>5</text> 银元</p>
					<view class="flexbw">
						<view class="piece">
							<text>请输入水晶数量</text>
							<input type="number" @input="input" v-model="crystal">
						</view>
						<view class="piece">
							<text>可兑换银元数量</text>
							<input type="number" disabled="disabled" v-model="value2">
						</view>
					</view>

					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="cystalToSilver()">立即兑换</u-button>
				</view>
			</view>
		</u-mask>


		<u-mask :show="show2">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/laba.png" mode="widthFix" />
					<view class="wightbg">
						<p>恭喜您成功获得</p>
						<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
						<text>{{silver}}银元</text>
					</view>
				</view>
				<view class="mask_btn button" @click="show2 = false">开心收下</view>
			</view>
		</u-mask>



		<!-- 水晶转赠 -->
		<u-mask :show ="giveshow">
			<view class="playbox2" :class="[giveshow?'playboxac2':'']">
				<image class="closed2" @click="giveshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/my/shuij2.png" mode="widthFix" />
					<h3>水晶转赠</h3>
					<p class="explain">我的水晶 <text>{{userinfo.crystal}}</text>个</p>
					<view class="piece">
						<text>好友ID</text>
						<input type="number" @blur="blurchange()" v-model="invite_code" maxlength="6" placeholder="请输入好友ID"
							placeholder-class="ipttxt" />
						<view class="people">
							<image :src="pimg" mode="" />
							<text>{{name}}</text>
						</view>
					</view>
					<view class="piece">
						<text>赠送数量</text>
						<input type="number" @input="inputchange()" v-model="numdata" placeholder="请输入赠送数量"
							placeholder-class="ipttxt" />
					</view>
					<view class="piece">
						<text>手续费</text>
						<input type="number" disabled="disabled" v-model="servicecharge"
								placeholder-class="ipttxt" />
					</view>
					<p class="tips">请确认接收人ID，赠送后无法追回 <br>
							平台禁止水晶倒卖出售，一经发现严肃处理</p>

					<view class="allmoney">合计水晶：<text>{{amount}}</text>个</view>
					<view class="button" @click="giveGold">立即转赠</view>
				</view>
			</view>
		</u-mask>


			<!-- 是否确认赠送 -->
		<u-mask :show="sureshow">
			<view class="warp">
				<view class="givebox">
					<h3>银元转赠</h3>
					<view class="m_content2">
						<p class="centerdd">赠送后无法退回,请谨慎操作</p>
						<p class="centerdd">确定向ID{{invite_code}}的用户赠送{{numdata}}枚水晶吗</p>
					</view>
					<!-- <view class="button quit" @click="sureshow = false">取消</view> -->
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
						class="button" @click="givegoldsure()">确认</u-button>
				</view>
				<image class="closed" @click="sureshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
			</view>
		</u-mask>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: "#201D24"
				},
				userinfo: uni.getStorageSync('userinfo'),
				show:false,
				show2:false,
				value:1,
				max:10,
				cannum:'',
				showresult:false,
				list:[
					{
						id:1,
						name:'夺宝熊兵',
						image:'1.png',
						path:'/pages/duoBao/baoIndex'
					},
					{
						id:2,
						name:'兑换水晶',
						image:'2.png',
						path:'/pages/index/exchange'
					},
					{
						id:3,
						name:'大玩家',
						image:'3.png',
						path:'/pages/index/goldword'
					},
					{
						id:4,
						name:'大逃杀',
						image:'4.png',
						path:'/pages/home/wolfkill'
					},
					{
						id:5,
						name:'水晶靓号',
						image:'5.png',
						path:'/pages/forest/number'
					},
					{
						id:6,
						name:'御风童子',
						image:'6.png',
						path:'/pages/game/flyboy'
					},
					{
						id:7,
						name:'喂神兽',
						image:'7.png',
						path:'/pages/home/feed'
					},
					{
						id:8,
						name:'潮玩宝箱',
						image:'8.png',
						path:'/pages/invitebox/inviteindex'
					},
					{
						id:9,
						name:'镇妖塔',
						image:'9.png',
						path:'/pages/forest/tower'
					},
					{
						id:10,
						name:'攒幸运值',
						image:'10.png',
						path:'/pages/invitebox/lucky'
					},
					{
						id:11,
						name:'扭蛋熊猫',
						image:'11.png',
						path:'/pages/forest/applet'
					},
				],
				crystal:'',
				value2:'',
				giveshow:false,
				sureshow:false,
				numdata: '', //赠送水晶数量
				invite_code: '', //赠送好友ID
				servicecharge: 0,
				selecet: false, //是否选择
				rate: '',
				amount: 0,
				charge: '',
				silver:'',
				name:'',
				pimg:'',
			};
		},
		onShow(){
			this.getUserInfo();
		},
		methods: {
			// 请求用户信息接口
			async getUserInfo() {
				this.$getUserInfo.getUserInfo((res) => {
					this.userinfo = res.data
					this.max = Math.trunc(res.data.crystal)
					this.charge = res.data.crystal_rate
				})
			},

			navtopath(item){
				if(item.id == 4 || item.id == 6) {
					this.$u.toast('即将正式上线');

				}else {
					this.$p.navto(item.path)
				}
			},

				// 失去焦点时触发
		blurchange(){
			if(this.invite_code.length == 6) {
				this.getUInfo()
			}else {
				this.$u.toast('请输入正确的ID')
			}
		},

		async getUInfo(){
			let res = await this.$http.index.getUInfo({
				invite_code:this.invite_code
			})
			if(res.code == 1) {
				console.log(res);
				this.pimg = res.data.img
				this.name = res.data.nickname
			}else {
				this.$u.toast(res.msg)
			}
		},

			// 监听用户输入水晶数量逻辑
			inputchange(e){
				let change =  Number(this.userinfo.crystal) / (1 + Number(this.charge)) 
				// 最大可赠送数量
				change = Math.floor(change)

				if(this.numdata > change) {
					this.$u.toast('赠送数量不能大于总计数量')
					this.$nextTick(() => {
						this.numdata = change
					});
				}
				
				this.$nextTick(()=>{
					this.numdata = this.numdata
					if(this.numdata == '' || this.numdata == 'null' || this.numdata == 0){
						this.servicecharge = 0
						this.amount = 0
					}else {
						this.servicecharge = (this.numdata * this.charge).toFixed(2) 
						this.amount =  (Number(this.numdata) + Number(this.servicecharge)).toFixed(2) 
						if(isNaN(this.amount)) {
							this.amount = 0
						}
						if(isNaN(this.servicecharge)) {
							this.servicecharge = 0
						}
					}
				})
			},


			// 赠送好友水晶
			async giveGold() {
				if (this.numdata == '' || this.numdata == null) {
					this.$u.toast('请输入赠送水晶数量')
				} else if (this.invite_code == '' || this.invite_code == null) {
					this.$u.toast('请输入赠送的好友ID')
				} else {
					this.sureshow = true
				}
			},

			// 赠送好友水晶
			async givegoldsure() {
				let res = await this.$http.index.giveCrystal({
					invite_code: this.invite_code,
					num: this.numdata,
					trader: this.danbao,
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.getUserInfo();
					this.giveshow = false
					this.sureshow = false
				}
			},

			
			valChange(){},
			// 确认兑换数量
			confirm(){
				this.cannum = this.value * 600
				this.show2 = true
			},

			// 确认兑换		
			async exchange(){
				let res =  await this.$http.index.crystalToYuanbao({
					num:this.value
				})
				if(res.code == 1) {
					this.show = false
					this.show2 = false
					this.getUserInfo();
					this.showresult = true
				}else {
					this.$u.toast(res.msg)
				}
			},

			// inpu框输入后
			input(e) {
				e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
				this.$nextTick(() => {
					this.crystal =  e.target.value
					if(this.crystal > Number(this.userinfo.crystal)) {
						this.$nextTick(() => {
							this.crystal = Math.trunc(Number(this.userinfo.crystal)) ;
							this.value2 = (this.crystal * 5)
						});
					}else {
						this.value2 = (this.crystal * 5)
					}
				})
			},

			// 宝石兑换银元
			async cystalToSilver(){
				let res = await this.$http.index.cystalToSilver({
					num:this.crystal
				})
				if(res.code == 1) {
					this.getUserInfo()
					this.silver = this.value2
					this.show = false
					this.show2 = true
				}else {
					this.$u.toast(res.msg)
				}
			},
		},
	}
</script>


<style lang="less">
.zone {
	background: #001616;
	min-height: 100vh;
}


.protety {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;

	.left {
		display: flex;
		align-items: center;

		image {
			width: 40px;
			margin-right: 5px;
		}
		h3 {
			color: #FFFFFF;
			font-size: 30px;
			font-weight: 600;
			margin: 0 5px;
		}
		text {
			font-size: 15px;
			color: #fff;
			margin-left: 5px;
		}
	}

	.right {
		image {
			width: 50px;
		}
	}
}

.func {
	margin-top: 5px;
	display: flex;
	align-items: center;
	padding: 10px;

	view {
		width: 105px;
		height: 47px;
		color: #422700;
		font-weight: 600;
		font-size: 14px;
		margin-right: 10px;
		background: url('http://img.cpgm.cc/panda/static/my/anniu.png');
		background-size: 100% 100% ;

		image {
			width: 100%;
		}
	}
}

.dibu {
	position: relative;
	background: url('http://img.cpgm.cc/panda/static/my/bei.png');
	height: calc(100vh - 167px);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: 50px 10px 10px;

	.box {
		width: 35%;
		position: absolute;
		top: -14%;
		right: 0;
	}

	
}




.listbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 9px;
	padding: 12px;

	.flbw {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	p {
		color: #1D1E24;
		font-size: 15px;
		font-weight: 600;
	}

	.card {
		background: #FFFFFF;
		border-radius: 4px;
		padding: 4px 5px;
		width: fit-content;
		display: flex;
		align-items: center;

		image {
			width: 20px;
			margin-right: 2px;
		}
		text {
			font-size: 12px;
			font-weight: 600;
		}
	}

	.list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 12px;
	}

	.item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px 0;

		image  {
			width: 55%;
		}
		text {
			color: #1D1E24;
			font-size: 12px;
		}
	}
}


.greybox {
	background: rgba(255,255,255,0.7);
	border-radius: 9px;
	margin-top: 12px;

	image {
		width: 100%;
	}
}






// 兑换银元

.playbox {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -50vh;
	background: url('http://img.cpgm.cc/panda/static/mask/bbg.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 32%;
			margin-top: -18%;
		}

		h3 {
			position: relative;
			color: #000000;
			font-size: 20px;
			width: 50%;
			text-align: center;
			z-index: 2;
		}

		.explain {
			color: #333333;
			font-size: 14px;
			margin: 10px 0;
			text {
				font-weight: 600;
			}
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.piece {
			width: 49%;
			background: #FFFFFF;
			border-radius: 9px;
			padding: 15px;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			margin: 5px 0;
			position: relative;

			text {
				color: rgba(29, 30, 36, 0.51);
				font-size: 14px;
				font-weight: 600;
				margin-right: 10px;
			}

			input {
				color: #000000;
				font-size: 18px;
				margin-top: 10px;
				font-weight: 600;
			}
		}

		.button {
			height: 68px;
			width: 100%;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			margin-top: 30px;
			color: #B73800;
			font-size: 18px;
			font-weight: 600;
		}

	}
	.closed {
		position: absolute;
		width: 25px;
		top: 8%;
		right: 15px;
	}
}

.playboxac {
	bottom:0 !important;
}

.flexbw {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}











// 转赠


.playbox2 {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -50vh;
	background: url('http://img.cpgm.cc/panda/static/mask/bbg.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 32%;
			margin-top: -18%;
		}

		h3 {
			position: relative;
			color: #000000;
			font-size: 20px;
			width: 50%;
			text-align: center;
			z-index: 2;
		}

		.explain {
			color: #333333;
			font-size: 14px;
			margin: 10px 0;
			text {
				font-weight: 600;
			}
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.piece {
			width: 100%;
			background: #FFFFFF;
			border-radius: 9px;
			padding: 15px;
			display: flex;
			align-items: center;
			margin: 5px 0;
			position: relative;

			text {
				color: #1D1E24;
				font-size: 14px;
				font-weight: 600;
				margin-right: 10px;
				width: 20%;
			}

			input {
				text-align: left;
				flex: 0.9;
				margin-left: 10px;
			}
		}

		.allmoney {
			margin-top: 20px;
			color: #696969;
			font-size: 14px;
			font-weight: 600;

			text {
				color: #000;
			}
		}

		.button {
			height: 68px;
			width: 100%;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			color: #B73800;
			font-size: 18px;
			font-weight: 600;
			margin-top: 10px;
		}

	}
	.closed2 {
		position: absolute;
		width: 25px;
		top: 8%;
		right: 15px;
	}

	.tips {
		width: 100%;
		text-align: left;
		color: #696969;
		font-size: 12px;
		margin-top: 5px;
	}
}

.playboxac2 {
	bottom:0 !important;
}






// 转赠弹窗

.givebox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	background-size: 100% 100%;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;

	h3 {
		position: relative;
		color: #000000;
		font-size: 20px;
		width: 50%;
		text-align: center;
		z-index: 2;
	}
	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.button {
		width: 80%;
		height: 55px;
		color: #B73800;
		margin: 0 auto;
		margin-top: 20px;
		background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
		background-size: 100% 100%;
		font-weight: 600;
	}
}


.button2 {
	color: #239D4C;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 600;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 13px;
		margin-left: 5px;
	}

	.seposabox {
		position: absolute;
		top: 100%;
		left: 0;
		transform: translateX(-32%);
		padding: 4px;
		width: 74px;
		height: 100px;
		background: #FFFFFF;
		border: 1px solid #FEE1C3;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;

		view {
			color: #696969;
		}
	}
}

.danb {
	flex: 1;
}


.closed {
	width: 25px;
	position: absolute;
	right: 10px;
	top: 10px;
}


// 转赠提示
.m_content2 {
		width: 100%;
		font-size: 12px;
		font-weight: bold;
		color: #fff;
		line-height: 20px;
		padding: 10px;

		p {
			color: #fff;
			font-size: 14px;
			text-align: left;
			line-height: 20px;
		}
	}

	.maskClose {
		position: absolute;
		bottom: -50px;
		width: 34px;
		height: 34px;
	}

	.know {
		width: 109px;
		height: 40px;
		background: linear-gradient(90deg, #8BECFF 0%, #F2ACFF 38%, #FDD258 100%);
		border-radius: 7px;
		color: #151515;
		font-size: 14px;
		font-weight: 600;
		margin-top: 20px;
	}

	.centerdd {
		text-align: center !important;
		margin: 10px 0;
		color: #131314 !important;
	}
	
.choosetips {
	color: #fff;
	font-size: 12px;
	margin-bottom: 5px;
}

.confirm {
	width: 60%;
	height: 45px;
	color: #fff;
	margin: 0 auto;
	margin-top: 20px;
	background: #000000 !important;
	border-radius: 21px;
}

.mart5 {
	margin-top: 5px;
}




// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 35%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}





.people {
	position: absolute;
	right: 10px;
	width: fit-content;
	display: flex;
	align-items: center;
	max-width: 200px;

	image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 5px;
	}

	text {
		flex: 1;
		color: #222;
		font-weight: 600;
		font-size: 12px;
	}
}


</style>
